import { StatusBar } from 'expo-status-bar';
import { Text, StyleSheet, View } from 'react-native';

// 基本类型，只能在tsx文件里面写
// 1、会给提示，指定了n为number类型，若下面为字符串类型，则会报错；
// 但是要是直接赋值‘abc’也能打印出来abc
// let n:number = 100;
// n=123;
// console.log(n);
// 2、数组里面的类型全都得是number类型的，一个不是都会报错
// let arr:number[]=[1,2,'a'];
// 3、object不能这么写
// let obj:object={
//   name:'ll',
//   age:20,
// }
// obj.a=100;
// 4、对象类型的该怎么写{name:type,...}
// 类型别名，自定义个类型的，通用的类型，将来在任何地方都能使用
// type user={ name: string, age: number };
// let obj: user = {
//     name:'ll',
//     age:20,
// };
// 5、作业一类型检查 data里面的内容类型检查必须得是规定的，不能随便加{}
// type opt={
//   title:string,
//   content:string
// }
// let data:opt={
//   title:'title',
//   content:'content'
// }
// 如果不写title：title,默认就是重名的
// let d={title,content};

// 6、元组,当数组里面类型不一样的时候，用元组来进行表达
// let arr1:[string,number]=['1',2];
// 7、any,不确定是什么类型，表示任意类型，有时候用any是为不报错
// 普通数组
// let arr2:any[]=[1,2,'222',{title:12}]
// 8、枚举enum
// 默认就是数字枚举0，1，2，3往后排的,要是指定是多少的话就都指定才行
// 也可以指定成字符串，字符串的话一定要指定,不指定就报错
// enum D{
//   up='20',
//   right='30',
//   down=50,
//   left=60
// }
// console.log(D.left);
// enum Res{
//   success,
//   fail
// }
// console.log(Res.success);

// 在函数中应用
const fn = (n:number,n2:number):number=>{
  // 前面指明了有number类型的返回值，就必须有;要是类型不对也会报错
  // 没有返回值的话，可以将number换成void
  console.log(123);
  return n+n2;
}
const fn1 = (n:number,n2:number):void=>{
  // 没有返回值的话，void
  console.log(123);
}
// 可选参数都要放到到最后一位，第三个参数n3?:number代表这个参数可写可不写
const fn2 = (n:number,n2:number,n3?:number):void=>{
  // 没有返回值的话，void
  console.log(123);
}
fn2(1,2)
// 最后一个可选参数为函数，而且该函数没有返回值
const fn3 = (n:number,n2:number,cb?:()=>void):void=>{
  // 没有返回值的话，可以将number换成void
  console.log(123)
}
fn3(1,2);
// 剩余参数也是放到最后，...n无论打印什么都会成为数组类型，后面都可以是任意传的
const fn4=(a:number,...n:number[]):number=>{
  console.log(n);
  return 1;
}
fn4(1,2,3,4,5);

type Prop={
  title:string,
  id:number
}

const Header = (props:Prop) => {
  return <Text>
    {props.title}-----{props.id+100}
  </Text>
}


export default function App() {

  return (
    <View style={styles.container}>
      <Header title='TS' id={888}/>
      <Text>hello TS</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ccc'
  },
})
